import { FiledChildProps } from "@/types";
import { Input, Space, Switch } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";

export const Mqtt = ({ storeData, onStoreDataChange }: FiledChildProps) => {
  return (
    <div style={{ padding: "10px" }}>
      <Space direction="vertical">
        <FormRowCol label="URL地址" illustrate={"必须以ws开头,否则不保存"}>
          <Input
            placeholder=""
            value={storeData.mqtt}
            onChange={(e) => {
              onStoreDataChange("mqtt", e.target.value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="Client ID">
          <Input
            value={storeData.mqttOptions?.clientId}
            onChange={(e) => {
              onStoreDataChange("mqttOptions", {
                ...storeData.mqttOptions,
                clientId: e.target.value,
              });
            }}
          />
        </FormRowCol>
        <FormRowCol label="关闭自动生成">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={storeData.mqttOptions?.customClientId || false}
            onChange={(checked) => {
              onStoreDataChange("mqttOptions", {
                ...storeData.mqttOptions,
                customClientId: checked,
              });
            }}
          />
        </FormRowCol>
        <FormRowCol label="用户名">
          <Input
            value={storeData.mqttOptions?.username}
            onChange={(e) => {
              onStoreDataChange("mqttOptions", {
                ...storeData.mqttOptions,
                username: e.target.value,
              });
            }}
          />
        </FormRowCol>
        <FormRowCol label="密码">
          <Input
            value={storeData.mqttOptions?.password}
            onChange={(e) => {
              onStoreDataChange("mqttOptions", {
                ...storeData.mqttOptions,
                password: e.target.value,
              });
            }}
          />
        </FormRowCol>
        <FormRowCol label="Topics*" illustrate={"多个topic以英文逗号“,”分隔"}>
          <Input
            placeholder={"英文逗号“,”分隔"}
            value={storeData.mqttTopics}
            onChange={(e) => {
              onStoreDataChange("mqttTopics", e.target.value);
            }}
          />
        </FormRowCol>
      </Space>
    </div>
  );
};
